import { formatNum } from 'helpers/num'
import { formatDatetime } from 'helpers/time'
import React, { Fragment } from 'react'
import styles from './style.module.css'
const BasicInfo = ({ data, onPlayAll }) => {
  return (
    <Fragment>
      {data && (
        <div className={styles.root}>
          <div className={styles.pic}>
            {data.coverImgUrl && <img alt='' src={data?.coverImgUrl} className='cover' loading='lazy' />}
          </div>
          <div className={styles.info}>
            <div className={styles.title}>
              <div className={styles.tag}>歌单</div>
              <div className={styles.name}>{data.name}</div>
            </div>

            <div className={styles.creator}>
              <div className={styles.avatar}>
                {data.creator.avatarUrl && <img src={`${data.creator.avatarUrl}?param=25y25`} loading='lazy' />}
              </div>
              <div className={styles.name}>{data.creator.nickname}</div>
              <div>{formatDatetime(data.createTime)}创建</div>
            </div>

            <div className={styles.operations}>
              <div className={styles.btn} onClick={() => onPlayAll(true)}>
                播放全部
              </div>
            </div>

            <div className={styles.detail}>
              <div>
                <span className={styles.lable}>标签:</span>
                {data?.tags.join(' / ') || '--'}
              </div>
              <div>
                <span className={styles.lable}>歌曲数:</span>
                {data?.trackCount}&nbsp;&nbsp;
              </div>
              <div>
                <span className={styles.lable}>播放数:</span>
                {formatNum(data.playCount)}
              </div>

              <div>
                <span className={styles.lable}>简介:</span>
                {data?.description || '--'}
              </div>
            </div>
          </div>
        </div>
      )}
    </Fragment>
  )
}
export default BasicInfo
